<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>解决塌陷问题</title>

        <style type="text/css">
            p { text-align: center ; }
            .odd { background-color: #dedede81 ; }
            .even { background-color: #ffff007e ; }
            .wrapper { border: 1px solid blue ; width: 80% ; margin: auto ; }

            .first { 
                /* 为了避免所有子元素浮动导致的父元素塌陷，主动为父元素设置 overflow 为 hidden */
                overflow: hidden ; 
            }
            .first>* { 
                float: left ; /* 元素向左浮动 */
                height: 100px ; 
                width: 200px ; 
            }

            .second { height: 100px ; }
            .second>* { height: 100px ; width: 150px ; float: left ; }
        </style>

    </head>
    <body>

        <p>
            如果未设置某个元素的高度，同时其内部所有子元素全部使用了float，此时会导致父元素塌陷
        </p>

        <div class="wrapper first">
            <span class="odd"></span>
            <span class="even"></span>
            <span class="odd"></span>
            <span class="even"></span>
            <span class="odd"></span>
            <span class="even"></span>
        </div>

        <hr>

        <div class="wrapper second">
            <span class="odd"></span>
            <span class="even"></span>
            <span class="odd"></span>
            <span class="even"></span>
            <span class="odd"></span>
            <span class="even"></span>
        </div>
        
    </body>
</html>